<template>
  <div id="app">
    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="formLabelAlign"
      style="max-width: 460px"
    >
      <el-form-item label="用户名:"> {{user_name}} </el-form-item>
      <el-form-item label="原密码:">
        <el-input v-model="formLabelAlign.prePassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="新密码:">
        <el-input v-model="formLabelAlign.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码:">
        <el-input
          v-model="formLabelAlign.rePassword"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref,computed } from "vue";
import request from "../../http/request";
import { ElMessage } from "element-plus";
export default {
  setup() {
    const userInfo=JSON.parse(sessionStorage.getItem('userInfo')); 
    const user_name=computed({
      get(){
        return  userInfo.user_name
      }
    })
    const formLabelAlign = ref({
      prePassword:'',
      password: "",
      rePassword: "",
    });
    const labelPosition = ref("left");
    const submit =async () => {
       if(!formLabelAlign.value.password){
          ElMessage({
          message: "请输入密码",
          type: "error"
        });
        return;
       }
       if(!formLabelAlign.value.rePassword){
          ElMessage({
          message: "请输入确认密码",
          type: "error"
        });
        return;
       }
      if (formLabelAlign.value.password != formLabelAlign.value.rePassword) {
        ElMessage({
          message: "密码不一致",
          type: "error"
        });
        return;
      }
      const params={
         user_id:userInfo.user_id,
         password:formLabelAlign.value.prePassword,
         new_password:formLabelAlign.value.password
      }
       const {data}=await request.setPassword(params);
       if(data){
          ElMessage({
          message:data.message,
          type: "success",
        });
       }
    };
    return {
      formLabelAlign,
      labelPosition,
      submit,
      user_name
    };
  },
};
</script>

<style lang='scss' scoped>
#app {
  background: #f8f8f8;
  width: 100%;
  padding: 10px;
  .el-form {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 10px;
  }
}
</style>